<template>
  <div class="sysMenu">

    <div class="searchArea">
      <span style="font-size: 13px"> 内容：</span>
      <el-input
        class="nameInput"
        placeholder="请输入内容"
        v-model="searchParams.menuName"
        size="small">
      </el-input>
      <el-button type="primary" size="small" icon="el-icon-search" @click="loadData">搜索</el-button>
      <el-button type="primary" size="small" icon="el-icon-refresh-right" @click="reset">重置</el-button>
    </div>

    <div class="actionArea">
      <el-button type="primary" size="small" icon="el-icon-plus" @click="openAddDialog">添加</el-button>
    </div>

    <div class="dataArea">
      <el-table
        :header-cell-style="{'text-align':'center','height':'49px','color':'black','background-color':'rgb(250,250,250)'}" m
        :cell-style="{'text-align':'center'}"
        border
        row-key="id"
        size="small"
        :tree-props="{children: 'children'}"
        @handleSelectionChange="handleSelectionChange"
        :data="sysMenuList"
      >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>

        <el-table-column
          prop="menuName"
          label="菜单名称"
        >
        </el-table-column>
        <el-table-column
          prop="path"
          label="路径"
        >
        </el-table-column>
        <el-table-column
          prop="component"
          label="组件"
        >
        </el-table-column>

        <el-table-column
          label="操作"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" style="margin-right: 10px" @click="openEditDialog(scope.row)">编辑</el-button>
            <el-popconfirm
              title="确定要删除该记录吗？"
              icon="el-icon-delete"
              @onConfirm="confirmDeleteSysMenu(scope.row.id)"
            >
              <el-button type="text" slot="reference" style="color: red" size="small">删除</el-button>
            </el-popconfirm>
          </template>

        </el-table-column>
      </el-table>

      <div class="page">
        <el-pagination
          background
          :current-page="page.pageNo"
          :page-size="page.pageSize"
          :total="page.total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :page-sizes="[10,20,30,40]"
          layout=" total,prev, pager, next,sizes, jumper"
        >
        </el-pagination>
      </div>
    </div>

    <el-drawer :visible.sync="showAddDialog"
               direction="rtl"
               title="添加"
               :close-on-click-modal="false"
              >
      <div  class="addDialog">
        <el-form :model="addSysMenu"
                 ref="addForm" label-position="left"
                 label-width="80px" :rules="rules">
          <el-form-item
            prop="menuName"
            label="菜单名称"
          >
            <el-input placeholder="请输入菜单名称" v-model="addSysMenu.menuName"></el-input>
          </el-form-item>

          <el-form-item
            prop="pid"
            label="上级分类"
          >
            <el-select v-model="addSysMenu.pid" style="width: 100%">
              <el-option v-for="item in rootMenuList" :label="item.menuName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            prop="path"
            label="路径"
          >
            <el-input placeholder="请输入路径" v-model="addSysMenu.path"></el-input>
          </el-form-item>
          <el-form-item
            prop="component"
            label="组件"
          >
            <el-input placeholder="请输入组件" v-model="addSysMenu.component"></el-input>
          </el-form-item>

          <el-form-item
            prop="sortNo"
            label="排序字段"
          >
            <el-input placeholder="请输入排序字段" v-model="addSysMenu.sortNo"></el-input>
          </el-form-item>
        </el-form>
        <div style="text-align: right">
          <el-button type="danger" size="small" style="border-radius: 0" @click="closeAddDialog">取消</el-button>
          <el-button type="primary" size="small" style="border-radius: 0" @click="confirmAddSysMenu">确定</el-button>
        </div>
      </div>

    </el-drawer>

    <el-drawer :visible.sync="showEditDialog"
               direction="rtl"
               title="修改信息"
               :close-on-click-modal="false">
      <div class="editDialog">
        <el-form :model="editSysMenu" ref="editForm" label-position="left" label-width="80px" :rules="rules">
          <el-form-item
            prop="menuName"
            label="菜单名称"
          >
            <el-input placeholder="请输入菜单名称" v-model="editSysMenu.menuName"></el-input>
          </el-form-item>

          <el-form-item
            prop="pid"
            label="上级分类"
          >
            <el-select v-model="editSysMenu.pid" style="width: 100%">
              <el-option v-for="item in rootMenuList" :label="item.menuName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            prop="path"
            label="路径"
          >
            <el-input placeholder="请输入路径" v-model="editSysMenu.path"></el-input>
          </el-form-item>

          <el-form-item
            prop="component"
            label="组件"
          >
            <el-input placeholder="请输入组件" v-model="editSysMenu.component"></el-input>
          </el-form-item>



          <el-form-item
            prop="sortNo"
            label="排序字段"
          >
            <el-input placeholder="请输入排序字段" v-model="editSysMenu.sortNo"></el-input>
          </el-form-item>

        </el-form>
        <div style="text-align: right">
          <el-button type="danger" size="small" style="border-radius: 0" @click="closeEditDialog">取消</el-button>
          <el-button type="primary" size="small" style="border-radius: 0" @click="confirmEditSysMenu">确定</el-button>
        </div>
      </div>

    </el-drawer>
  </div>
</template>

<script>

import {getAction, postAction} from "@/utils/http";
import {Message} from "element-ui";

export default {
  name: "sysMenu",
  data() {
    return {
      showAddDialog: false,
      showEditDialog: false,
      addSysMenu: {
        username: '',
        password: '',
        birthday: ''
      },
      editSysMenu: {},
      sysMenuList: [],
      page: {
        pageNo: 1,
        pageSize: 10,
        total: 0
      },
      rules: {
        menuName: [{required: true, message: '请输入菜单名称', trigger: 'blur'}],
        path: [{required: true, message: '请输入路径', trigger: 'blur'}],
        component: [{required: true, message: '请输入组件', trigger: 'blur'}],
        pid: [{required: true, message: '请输入父id', trigger: 'blur'}],
        sortNo: [{required: true, message: '请输入排序字段', trigger: 'blur'}],
      },
      searchParams: {},
      selectedList: [],
      urls: {
        list: "/sysMenu/sysMenu/list",
        queryList: "/sysMenu/sysMenu/queryList",
        add: "/sysMenu/sysMenu/add",
        edit: "/sysMenu/sysMenu/edit",
        deleteById: "/sysMenu/sysMenu/deleteById",
        deleteBatch: "/sysMenu/sysMenu/deleteBatch",
        queryRoot: "/sysMenu/sysMenu/queryRootList"
      },
      rootMenuList: []
    }
  },
  created() {
    this.loadData()

  },
  methods: {
    queryRootList() {
      getAction(this.urls.queryRoot,{id:this.editSysMenu.id}).then(res => {
        if (res.success) {
          this.rootMenuList = res.result
        }
      })
    },
    reset() {
      this.searchParams = {}
      this.page.total = 0
      this.page.pageSize = 10
      this.page.pageNo = 1
      this.loadData()
    },
    handleCurrentChange(val) {
      this.page.pageNo = val
      this.loadData()
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.loadData()
    },
    loadData() {
      let params = {
        ...this.page,
        ...this.searchParams
      }
      getAction(this.urls.list, params).then(res => {
        if (res.success) {
          let {records, current, size, total} = res.result
          this.sysMenuList = records
          this.page.pageNo = current
          this.page.pageSize = size
          this.page.total = total
        }
      })
    },
    openAddDialog() {
      this.showAddDialog = true
      this.addSysMenu = {}
      if (this.$refs['addForm'] !== undefined) {
        this.$refs['addForm'].resetFields();
      }
      this.queryRootList()
    },
    closeAddDialog() {
      this.showAddDialog = false
      this.queryRootList()
    },
    openEditDialog(sysMenu) {
      this.editSysMenu = Object.assign({}, sysMenu)
      this.showEditDialog = true
      this.queryRootList()
    },
    closeEditDialog() {
      this.showEditDialog = false
      this.$refs.editForm.resetFields()
    },
    confirmAddSysMenu() {
      console.log(this.addSysMenu)
      this.$refs.addForm.validate(valid => {
        if (valid) {
          postAction(this.urls.add, this.addSysMenu).then(res => {
            if (res.success) {
              this.addSysMenu = {}
              this.showAddDialog = false
              Message.success("添加成功！");
              this.loadData()
            }
          })
        }
      })

    },
    confirmDeleteSysMenu(id) {
      getAction(this.urls.deleteById, {id}).then(res => {
        if (res.success) {
          Message.success("删除成功！");
          this.loadData()
        }
      })
    },
    confirmEditSysMenu() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          postAction(this.urls.edit, this.editSysMenu).then(res => {
            if (res.success) {
              this.showEditDialog = false
              this.editSysMenu = {}
              Message.success("修改成功！")
              this.loadData()
            }

          })
        }
      })
    },
    handleSelectionChange(val) {
      this.selectedList = val
    },
  }
}
</script>

<style scoped lang="scss">
.sysMenu {
  padding: 20px;

  .dataArea {
    margin-top: 20px;

    .page {
      text-align: center;
      margin-top: 20px;
    }
  }

  .actionArea {
    margin-top: 20px;
  }

  .searchArea {
    .nameInput {
      margin-right: 20px;
      width: 180px;
    }
  }

  .editDialog {
    padding: 18px;
    box-sizing: border-box;
    margin: 0 auto;
  }

  .addDialog {
    padding: 18px;
    box-sizing: border-box;
    margin: 0 auto;
  }
}
</style>

<style>
.searchArea .el-button {
  border-radius: 0;
}

.actionArea .el-button {
  border-radius: 0;
}

.nameInput input {
  border-radius: 0;
}

.editDialog input, .addDialog input {
  border-radius: 0;
}
</style>
